<template>
    <div>
<!--        <h2>这是首页</h2>-->
<!--        <router-link to="/login" tag="div">去登录</router-link>-->
<!--        <router-link to="/courseDetails" tag="div">去课程详情页</router-link>-->
<!--        <router-link to="/PersonalCenter" tag="div">去个人中心页</router-link>-->
<!--        <router-link to="/search" tag="div">去搜索页</router-link>-->
    <topAdv :is-show="false"></topAdv>
        <div  class="adv-index" >
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" >
                <el-menu-item index="1">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title" >课程分类</template>
                    <el-menu-item index="2-1" v-for="(item,index) in advList" :key="index">{{item.title}}</el-menu-item>
<!--                    <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--                    <el-menu-item index="2-3">选项3</el-menu-item>-->

                </el-submenu>
                <el-menu-item index="3">专属课程</el-menu-item>
            </el-menu>
        </div>
        <!--        轮播图-->
        <div >
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item class="swiper" v-for="(item,index) in swiperList" :key="index" :style="{background:'url('+item.imgUrlPc+')' }">
<!--                    <h3>{{ item }}</h3>-->

<!--                    <img class="swiper-img" :src="item.imgUrlPc" alt="" >-->
<!--                    <div ></div>-->
                </el-carousel-item>
            </el-carousel>
        </div>
<!--        直播课程-->
        <section id="live">
            <div >
                <h2 >直播课程</h2>
                <div class="live-box">
                    <div class="live-left">
                        <img :src="imgList[index]"
                             alt="" ref="img">
                        <div class="left-text">

                        </div>
                        <div class="text">
                            <p ref="text">求职技巧之重难点问题剖析与解决</p>
                            <p><span class=" el-icon-circle-check"></span>&nbsp;&nbsp;直播结束</p>
                            <button class="btn1">直播结束</button>
                        </div>
                    </div>

                    <section class="live-right">
                        <ul>
                            <li v-for="(item,i) in tabList" :key="i" @mouseover="changeColor(i)">
                                <div>
                                    <span ><span class=" el-icon-circle-check"></span>&nbsp;&nbsp;{{item.liveStatus}}</span>
                                    &nbsp;&nbsp; <span>{{item.livecontent}}</span>
                                </div>
                            </li>

                        </ul>
                    </section>
                </div>

            </div>
        </section>

        <courseDiscount :typecontent="{'type':'free','title':'免费课程','size':'10'}"></courseDiscount>
        <courseDiscount :typecontent="{'type':'boutique','title':'精品课程','size':'5'}"></courseDiscount>
        <courseDiscount :typecontent="{'type':'discount','title':'折扣课程','size':'5'}"></courseDiscount>

        <!--        头条精选-->
        <courseHeadlines></courseHeadlines>
<!--        底部链接-->
        <footerList></footerList>
    </div>
</template>

<script>
    import topAdv from "../../components/topAdv";
    // import courseFree from "./components/courseFree";
    // import courseBoutique from "./components/courseBoutique";
    import courseDiscount from "./components/courseDiscount";
    import courseHeadlines from "./components/courseHeadlines";
    import footerList from "../../components/footerModify";
    import {getDropDownList, getSlideShow} from "../../api";

    export default {
        name: "index",
        data(){
            return{
                swiperList:[],//轮播图
                activeIndex: '1',//下拉菜单
                activeIndex2: '1',//下拉菜单
                advList:[],//渲染列表
                tabList:[
                    {liveStatus:'直播结束',livecontent:'求职技巧之重难点问题剖析与解决'},
                    {liveStatus:'直播结束',livecontent:'IT开发编程方向之职业规划'},
                    {liveStatus:'直播结束',livecontent:'研究生复试之高效准备简历的方法'},
                    {liveStatus:'直播结束',livecontent:'十大经典排序之Part-6-完结篇'},
                    {liveStatus:'直播结束',livecontent:'jdk1.8-新特性之函数式接口与方法引用'},

                ],//直播
                imgList:[
                    'https://online-course.nos-eastchina1.126.net/%E5%B0%81%E9%9D%A2-1258625253353979904.png',
                    'https://online-course.nos-eastchina1.126.net/%E7%9B%B4%E6%92%AD%E5%B0%81%E9%9D%A2-1254953535796150272.png',
                    'https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png',
                    'https://online-course.nos-eastchina1.126.net/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%20%E5%9F%BA%E7%A1%80%E7%AF%87%20%E6%8B%B7%E8%B4%9D-1252123020651134976.jpg',
                    'https://online-course.nos-eastchina1.126.net/%E5%B0%81%E9%9D%A2-1258625253353979904.png'
                ],
                index:0,
            }
        },
        methods:{
            changeColor(i) {
                this.index=i
            },

        },
        created() {
            //    轮播图
            getSlideShow().then(res=>{
                // console.log(res)
                this.swiperList=res.data
            })
            //下拉菜单
            getDropDownList().then(res=>{
                // console.log(res)
                this.advList=res.rows
            })

        },
        components:{
            topAdv,
            // courseFree,
            // courseBoutique,
            courseDiscount,
            courseHeadlines,
            footerList,


        }
    }
</script>


<style scoped lang="less">
    .adv-index {
        margin-left: 130px!important;

    }



    /*轮播*/
    .swiper {
        background-repeat: no-repeat!important;
        background-position: center!important;
    }


    #live {
        margin: 50px auto!important;
        width: 1200px;
        margin: auto;
        h2 {
            text-align: center;
        }
    }
    .live-box {
        margin-top: 30px!important;
        overflow: hidden;
        width: 1200px;
    }
    .live-left,
    .live-right {
        overflow: hidden;
        float: left;
        width: 600px;
        height: 350px;
    }
    .live-left {
        position: relative;
    }
    .live-left img {
        width: 100%;
        height: 100%;
    }
    .left-text {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: black;
        opacity: 0.4;
        z-index: 10;
    }
    .text {
        position: absolute;
        left: 0;
        top: 0;
        z-index:100;
    }
    .text>p {
        width: 600px;
        margin:60px auto!important;
        color: white;
        text-align: center;
        font-size: 24px;
        opacity: 1;
        z-index: 9999;
    }
    .text>p:nth-of-type(2) {
        font-size: 14px;
    }

    .text>button {
        margin-left: 200px!important;
        width: 180px;
        height: 50px;
        font-size: 18px;
        color: #fff;
        background-color: #00cf8c;
        border-color: #00cf8c;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%) !important;
        -webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%) !important;
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%) !important;
    }

    /* .left-text>p {
        text-align: center;
        font-size: 24px;
        opacity: 1;
        color: white;
    } */
    .live-right {
        background-color: #f4f4f4;
    }
    .live-right>ul>li {
        height: 50px;
        line-height: 50px;
        padding: 0 10px 0 30px!important;
        font-size: 16px;
        border-left: 5px solid transparent;
    }
    .live-right>ul>li:hover {
        background: #fff;
        border-left: 5px solid #00cf8c;
        color: #00cf8c;
        cursor: pointer;

    }



</style>